import { FC } from 'react'
import { Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

import style from './index.module.scss'
import LoginLogo from '../../assets/common/login-logo.png'
import { useDispatch } from 'react-redux'

import { login } from '../../store/actions'
const Login: FC = () => {
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  // 登录表单手机号，密码
  // const [loginForm, setLoginForm] = useState({ mobile: '13800000002', password: '123456' })

  const onFinish = async (values: any) => {
    await dispatch(login(values))
  }

  return (
    <div className={style.root}>
      <div className="login-container">
        <div className="login-form">
          <h3 className="title">
            <img src={LoginLogo} alt="" />
          </h3>
          <Form
            form={form}
            name="mobile"
            onFinish={onFinish}
            initialValues={{
              mobile: '13800000002',
              password: '123456'
            }}
          >
            <Form.Item
              name="mobile"
              rules={[
                { required: true, message: '请输入手机号' },
                { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="登录手机"
              />
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item shouldUpdate>
              {() => (
                <Button type="primary" htmlType="submit" block className="login-btn">
                  登录
                </Button>
              )}
            </Form.Item>
          </Form>

          <div className="tips">
            <span style={{ marginRight: '20px' }}>账号: 13800000002</span>
            <span> 密码: 123456</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Login
